<template>
	<view>
		<view class="u-p-30 bg-white">
			<view class="u-flex">
				<u-search v-model="key" :show-action="false" shape="square" clearabled @change="searchKeyword"></u-search>
				<view class="u-p-l-20" @click="show = !show">
					<text class="u-p-r-10">筛选</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
		</view>
		<!-- 筛选面板 -->
		<view class="filter-container" v-if="show == true">
			<view class="item">
				<view class="u-p-b-10"><text class="tips-txt">时间筛选</text></view>
				<view class="tag-con">
					<view class="cell" :class="item.check == true?'on':''" v-for="(item,index) in timeOptions" :key="index" @click="choose(item,'timeOptions','timeType')">
						<text>{{item.label}}</text>
					</view>
				</view>
				<!-- 已选条件展示 -->
				<view v-if="selectedTags.length" class="selected-tags u-p-t-30 u-p-r-30">
					<u-tag v-for="(tag, index) in selectedTags" :key="index" :text="tag.text" :type="tag.type"
						@close="removeTag(tag)" mode="plain"/>
				</view>
			</view>
			<view class="bottom-btn">
				<view class="btn cancel" @click="clean">清空</view>
				<view class="btn confirm" @click="emitFilter();show = false">确定</view>
			</view>
		</view>
		<!-- 时间选择 -->
		<u-calendar v-model="showCalendar" mode="range" active-bg-color="#10beca" @change="handleDateChange" />
		<!-- <u-mask :show="show" @click="show = false" z-index="-1"></u-mask> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				key: '',
				timeOptions: [
					{
						label: '全部',
						value: 0,
						check: true
					},
					{
						label: '今日',
						value: 1,
						check: false
					},
					{
						label: '昨日',
						value: 2,
						check: false
					},
					{
						label: '本月',
						value: 3,
						check: false
					},
					{
						label: '上月',
						value: 4,
						check: false
					},
					{
						label: '本季度',
						value: 5,
						check: false
					},
					{
						label: '上季度',
						value: 6,
						check: false
					},
					{
						label: '本年',
						value: 7,
						check: false
					},
					{
						label: '上年',
						value: 8,
						check: false
					},
					{
						label: '自定义日期',
						value: 9,
						check: false
					}
				],
				// 弹出时间范围选择
				showCalendar: false,
				filterValues: {
					timeType: 0,
					// sort: 1
				},
				selectedTags: [],
			}
		},
		watch:{
			'filterValues.timeType':{
				immediate: true,
				deep: true, // 启用深度监听
				handler(newVal) {
					if(newVal == 9){
						this.showCalendar = true
					}else{
						this.selectedTags = []
					}
				}
			}
		},
		methods: {
			searchKeyword(){
				this.emitFilter()
			},
			emitFilter() {
				this.$emit('filter-change', {
					...this.filterValues,
					key: this.key
					// tags: this.selectedTags
				})
			},
			handleDateChange(dates) {
				this.selectedTags= [{
					key: 'dateRange',
					text: `自定义时间筛选：${dates.startDate} 至 ${dates.endDate}`
				}]
				this.filterValues.startDate = dates.startDate
				this.filterValues.endDate = dates.endDate
				this.emitFilter()
			},
			clean(){
				this.filterValues = {
					timeType: 0,
					// sort: 1
				}
				this.key = ''
				this.show = false
				this.emitFilter()
			},
			choose(item,options,type){
				this[options].map((cell)=>{
					cell.check = false
				})
				item.check = true
				this.filterValues[type] = item.value
				// this.$set(this[options],'check',true)
				// this[options].find((cell)=>cell.value == item.value).check = true
				// this.$forceUpdate()
				console.log(this[options],item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-container{
		position: fixed;
		width: 100%;
		padding: 30rpx;
		z-index: 99;
		background: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		.tag-con{
			display: flex;
			flex-wrap: wrap;
			.cell{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 60rpx;
				padding: 20rpx;
				border: 1px solid $u-border-color;
				margin: 5rpx 10rpx 10rpx 0;
				border-radius: 10rpx;
				font-size: 24rpx;
				&.on{
					color: $u-color-blue;
					border-color: $u-color-blue;
				}
			}
		}
		.bottom-btn{
			display: flex;
			margin-top: 30rpx;
			.btn{
				flex: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				&.cancel{
					background-color: $u-color-light;
				}
				&.confirm{
					background-color: $u-color-blue;
					color: #fff;
				}
			}
		}
	}
</style>
